<template>
    <div class="min-h-[920px]" v-loading="isLoading">
        <div>
            <el-descriptions ref="ruleFormRef" :column="4" direction="vertical" v-loading="isLoading">
                <el-descriptions-item width="25%" label="产品类型">
                    {{ isNullOrEmpty( newFormInline?.productName ) }}
                </el-descriptions-item>
                <el-descriptions-item width="25%" label="设备别名">
                    {{ isNullOrEmpty( newFormInline?.deviceName ) }}
                </el-descriptions-item>
                <el-descriptions-item width="25%" label="设备序列号">
                    {{ isNullOrEmpty( newFormInline?.deviceSN ) }}
                </el-descriptions-item>
                <el-descriptions-item width="25%" label="设备状态">
                    <el-tag :type="DEVICESTATUSTABLE[newFormInline.commStatus]?.type">
                        {{ isNullOrEmpty(DEVICESTATUSTABLE[newFormInline.commStatus]?.label ?? '--') }}
                    </el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div>
            <div class="border-b-[1px] h-[34px] border-[#ECEDF0] dark:border-[#3C4054] mb-[16px] flex boderRight">
                <div v-for="(item, index) in paneLists" :key="index"
                    class="border-[1px] mr-[4px] text-[14px] px-[16px] roundeds h-[34px] flex items-center justify-center cursor-pointer transition-all duration-300"
                    :class="activeName == item.name
                        ? 'text-[#fff]  bg-[var(--el-color-primary)] border-[var(--el-color-primary)] h-[33px]'
                        : 'border-[#ECEDF0] text-[#666666] dark:text-[#9794A2] dark:border-[#3C4054]'
                        " @click="change(item)">
                    {{ isNullOrEmpty( item.label ) }}
                </div>
            </div>
            <component v-if="!isLoading" :is="activeComp" :deviceinfo="deviceinfo" :deviceId="id" />
        </div>
    </div>
</template>

<script setup lang="ts">
import {isNullOrEmpty} from '@/utils/functions'
import realsTimedata from "./components/reals-timedata.vue";
import basicInformation from "./components/basic-information.vue";
import equipmentLocation from "./components/equipment-location.vue";
import linkedVideo from "./components/linked-video.vue";
import linkedControl from "./components/linked-control.vue";
import dataRecord from "./components/data-record.vue";
import alarmRecord from "./components/alarm-record.vue";
import faultRecord from "./components/fault-record.vue";
import offlineRecord from "./components/offline-record.vue";
import controlrecords from "./components/control-records.vue";
import {
    DEVICESTATUSTABLE,
} from "@/constant/device-mangenment";
import { getDeviceInfo } from "@/api/screen";
import { ElMessage } from "element-plus";

type FormProps = {
    newFormInline: any;
    isLoading: boolean;
    id: number
};

const props = withDefaults(defineProps<FormProps>(), {
    newFormInline: () => ({}) as any,
    isLoading: true,
    id: 0
});

const deviceinfo = ref({
    deviceName: "",
    productId: "",
    prodcutName: "",
    deviceSN: "",
    connectStatus: "",
    systemId: "",
    systemName: "",
    status: "",
    commandInfo: [],
    structInfo: [],
    remark: "",
    productName: '',
    rate: ""
});
const activeName = ref("1");
const activeComp = ref(realsTimedata);

const paneLists = {
    1: { name: "1", label: "实时数据", com: realsTimedata },
    2: { name: "2", label: "基本信息", com: basicInformation },
    // 3: { name: "3", label: "设备位置", com: equipmentLocation },
    4: { name: "4", label: "关联视频", com: linkedVideo },
    // 5: { name: "5", label: "联动控制", com: linkedControl },
    6: { name: "6", label: "数据记录", com: dataRecord },
    7: { name: "7", label: "报警记录", com: alarmRecord },
    8: { name: "8", label: "故障记录", com: faultRecord },
    9: { name: "9", label: "离线记录", com: offlineRecord },
    10: { name: "10", label: "控制记录", com: controlrecords },
};
onMounted(() => {
    getDeviceInfo({ deviceId: props.id }).then(res => {
        if (res.code == 200) {
            deviceinfo.value = res.result;
        } else {
            ElMessage.error(res.msg);
        }
    });
})
const change = (item: any) => {
    activeName.value = item.name;
    activeComp.value = item.com;
};

</script>
<style scoped lang="scss">
.roundeds {
    border-radius: 4px 4px 0 0;
}

.boderRight:nth-child(1) {
    border-left: 1px solid #ecedf0;
    border-top-left-radius: 4px;
}

.dark {
    .boderRight:nth-child(1) {
        border-left: 0px solid #3c4054;
        border-top-left-radius: 4px;
    }
}
</style>